<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
  <div id="app">
    <bt-button disabled size="xs">按钮</bt-button>
    <bt-button type="danger" size="sm">按钮</bt-button>
    <bt-button type="warning">其他按钮</bt-button>
    <bt-button type="success" size="lg">其他按钮</bt-button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const btButton = {
      template: `
        <button
          class="btn"
          :class="{
            'btn-danger': type === 'danger',
            'btn-default': type === 'default',
            'btn-success': type === 'success',
            'btn-info': type === 'info',
            'btn-primary': type === 'primary',
            'btn-warning': type === 'warning',
            'btn-xs': size === 'xs',
            'btn-sm': size === 'sm',
            'btn-lg': size === 'lg'
          }"
          :disabled='disabled'
        >
          <slot></slot>
        </button>
      `,
      props: {
        type: {
          type: String,
          default: 'default'
        },
        disabled: Boolean,
        size: String
      }
    }

    Vue.component('btButton', btButton)



    const app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>